<template>
  <div class="fenxiao-order">
    <fxsHeader :type="3" :Data="fxsHeaderData"></fxsHeader>
    <div class="item-card">
      <div class="select-item">
        <div class="aGroup">
          <scroll
            class="wrapper"
            ref="wrapper"
            :data="arr"
            :startX="0"
            :click="true"
            :scrollX="true"
            :scrollY="false"
            :eventPassthrough="'vertical'"
          >
            <div class="content">
              <van-button class="span" :color="type == 1 ? '#F30C23':'#999999'" plain hairline round type="primary" @click="selectItem(1)">
                <i>全部</i>
                <em>{{arr['1'] || 0}}</em>
              </van-button>
              <van-button class="span" :color="type == 2 ? '#F30C23':'#999999'" plain hairline round type="primary" @click="selectItem(2)">
                <i>未付款</i>
                <em>{{arr['2'] || 0}}</em>
              </van-button>
              <van-button class="span" :color="type == 3 ? '#F30C23':'#999999'" plain hairline round type="primary" @click="selectItem(3)">
                <i>已付款</i>
                <em>{{arr['3'] || 0}}</em>
              </van-button>
              <van-button class="span" :color="type == 4 ? '#F30C23':'#999999'" plain hairline round type="primary" @click="selectItem(4)">
                <i>已确认收货</i>
                <em>{{arr['4'] || 0}}</em>
              </van-button>
            </div>
          </scroll>
        </div>
      </div>
    </div>
    <div class="user-list" v-show="list.length">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        :immediate-check="immediateCheck"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" class="item">
          <div class="dhs-virtual-icon" v-if="item.is_dhs_virtual == 1"></div>
          <div class="fxordertit clearfix">
            <span class="fl">订单日期：{{item.end_time}}&nbsp;</span>
            <span class="fl">付款日期：{{item.pay_time}}</span>
            <span class="fr" :class="[item.status == 3 ? 'ready' : '']">{{item.status_name}}</span>
          </div>
          <div class="fxorderlst clearfix">
            <div class="dxPic fl">
              <img :src="item.avthor || defaultPhotoImg" class="user" />
            </div>
            <div class="fxorderinfo fl">
              <p v-if="item.receiver_name">
                <span>姓名：</span>
                <span>{{item.receiver_name}}</span>
              </p>
              <p>
                <span>{{commission_name}}：</span>
                <span v-if="item.commission">&yen;{{item.commission}}</span>
                <span v-else>--</span>
              </p>
              <p>
                <span>会员ID：</span>
                <span v-if="item.user_id">{{item.user_id}}</span>
                <span v-else>--</span>
              </p>
              <p>
                <span>级别：</span>
                <span>{{item.level_name}}</span>
              </p>
              <p>
                <span>金额：</span>
                <span v-if="item.money">&yen;{{item.money}}</span>
                <span v-else>--</span>
              </p>
              <p v-if="item.order_status">
                <span>状态：</span>
                <span>{{item.order_status}}</span>
              </p>
              <p v-if="item.nickname">
                <span>昵称：</span>
                <span>{{item.nickname}}</span>
              </p>
              <p v-if="item.mobile && is_fx_order_mobile == 1">
                <span>电话：</span>
                <span>{{item.mobile}}</span>
              </p>
            </div>
          </div>
          <!-- <p class="check_detail" @click="fxOrderDetail(item.order_id)">
            <span>查看订单商品明细</span>
            <svg-icon icon-class="icon_right" class="all-class-icon"></svg-icon>
          </p> -->
           <div class="check_detail">
            <van-button class="btn" color="#F30C23" plain hairline round type="primary" text="查看订单商品明细" @click="fxOrderDetail(item.order_id)"></van-button>
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
// import noDataImg from '@img/user/no_order_data.png'
import noData from '@/components/noData/index'
// import default_photo_img from '@img/default_avatar.jpg'
import fxsHeader from '@/views/user/staffCenter/components/staffHeader/index'
import Scroll from '@/components/scroll/index'
import { getFenxiaoOrder } from '@/api/user/fxs/fxsApi'

import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      noData: {
        text: '暂无订单',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        marginTop: '10em'
      },
      fxsHeaderData: {
        commission_name: '',
        total_commissions: '',
        total_fee: '',
        ftitle_superior_user_order: '',
        superior_user_payment: '',
        show_fxProduct: null,
        fenxiao_goods_count: '',
        ftitle_item: '',
        next_lever_agent_count: '',
        ftitle_agents: '',
        show_myUser: null,
        next_lever_user_count: '',
        ftitle_users: '',
        show_fxOrder: null,
        fenxiao_order_count: '',
        ftitle_fx_order: ''
      },
      // 订单分类
      arr: {
        1: '',
        2: '',
        3: '',
        4: ''
      },
      commission_name: '',
      is_fx_order_mobile: '',
      is_agent: 2,
      type: 1,
      p: 1,
      // vant 列表组件
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      // 列表
      list: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const data = {
        is_agent: this.is_agent,
        p: this.p,
        type: this.type
      }
      getFenxiaoOrder(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1 && res.data.status == 1) {
          const resData = res.data.data
          this.is_agent = resData.is_agent
          // 头部和导航数据
          this.fxsHeaderData.commission_name = this.commission_name =
            resData.commission_name
          this.fxsHeaderData.total_commissions = resData.total_commissions
          // this.fxsHeaderData.ftitle_fx_order = resData.ftitle_fx_order
          this.fxsHeaderData.total_fee = resData.total_fee
          this.fxsHeaderData.ftitle_superior_user_order =
            resData.ftitle_superior_user_order
          this.fxsHeaderData.superior_user_payment =
            resData.total_fee != 0 ? resData.superior_user_payment : 0
          // 分销产品
          this.fxsHeaderData.show_fxProduct = resData.show_fxProduct
          this.fxsHeaderData.fenxiao_goods_count =
            resData._common.fenxiao_goods_count
          if (this.is_agent == 1) {
            this.fxsHeaderData.ftitle_item = resData.ftitle_item
          } else if (this.is_agent == 2) {
            this.fxsHeaderData.ftitle_item = resData.ftitle_staff_goods
          } else if (this.is_agent == 3) {
            this.fxsHeaderData.ftitle_item = resData.ftitle_store_goods
          }
          // 分销商
          this.fxsHeaderData.next_lever_agent_count =
            resData._common.next_lever_agent_count
          this.fxsHeaderData.ftitle_agents = resData.ftitle_agents
          // 会员
          this.fxsHeaderData.show_myUser = resData.show_myUser
          this.fxsHeaderData.next_lever_user_count =
            resData._common.next_lever_user_count
          if (this.is_agent == 1) {
            this.fxsHeaderData.ftitle_users = resData.ftitle_users
          } else if (this.is_agent == 2) {
            this.fxsHeaderData.ftitle_users = resData.ftitle_staff_user
          } else if (this.is_agent == 3) {
            this.fxsHeaderData.ftitle_users = resData.ftitle_store_user
          }
          // 订单
          this.fxsHeaderData.show_fxOrder = resData.show_fxOrder
          this.fxsHeaderData.fenxiao_order_count =
            resData._common.fenxiao_order_count
          this.fxsHeaderData.ftitle_fx_order = resData.ftitle_fx_order
          // 按钮
          this.arr = resData.arr  
          // 其它
          this.is_fx_order_mobile = resData.is_fx_order_mobile
          // 列表
          if (resData.order_list && resData.order_list.length) {
            this.list = resData.order_list
            this.p++
          } else {
            this.finished = true
          }

          /* if (resData.order_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          } */
        } else {
          this.$Error(res.mag)
        }
      })
    },
    onLoad() {
      const data = {
        is_agent: this.is_agent,
        p: this.p,
        type: this.type
      }
      getFenxiaoOrder(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (res.data && res.data.length) {
            this.list.push(...res.data)
            this.p++
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    selectItem(type) {
      if (type == this.type) return
      this.type = type
      this.p = 1
      this.finished = false
      this.error = false
      this.loading = false
      this.init()
    },
    fxOrderDetail(order_id) {
      const path = 'fenxiaoOrderDetail'
      this.$JumpPath(this, path, { order_id })
    }
  },
  components: {
    fxsHeader,
    noData,
    Scroll
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad()
    })
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
@import 'src/styles/variables';
@import 'src/styles/user/Group/index';

.fenxiao-order {
  .select-item{
    padding:0 20px;
  }
  .user-list {
    .item {
      margin: 20px auto 0;
      background-color: $default;
      position: relative;
      font-size: 28px;
      color: #333;
      overflow: hidden;
      border: none;
      .dhs-virtual-icon {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 68px;
        height: 68px;
        background: url('https://img.wifenxiao.com/h5-wfx/images/user/dhs_virtual_icon.png')
          no-repeat;
        background-size: cover;
      }
      .fxordertit {
        padding-right: 18px;
        height: 80px;
        line-height: 80px;
        padding-left: 10px;
        border-bottom: 2px solid #EDEDED;
        span {
          font-size: 24px;
          &.fl {
            margin-left: 16px;
          }
          &.fr {
            color: #FF8C01;
            margin-right: 20px;
            &.ready {
              color: #F21228;
            }
          }
        }
      }
      .fxorderlst {
        display:flex;
        padding: 30px 30px 20px;
        // display: inline-flex;
        .dxPic {
          width: 120px;
          height: 120px;
          margin-right:24px;
          border-radius: 50%;
          overflow: hidden;
          img{
            display:block;
            width:100%;
          }
        }

        .fxorderinfo {
          flex: 1;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          position: relative;
          p {
            color: #666;
            display: flex;
            width: 50%;
            @include lineClamp(24px,36px,1);
            margin: 7px 0;
            span {
              &:first-child {
                font-size: 22px;
                font-weight:bold;
                color: #333;
              }
            }  
          }
        }
      }
      .check_detail {
        width: 100%;
        padding:4px 0 44px 174px;
        .btn{
          height:50px;
          padding:0 24px;
          font-size:24px;
        }
      }
    }
  }
}
</style>
